经典CSS面试题

来源:网络整理作者: 发布时间:2020-12-19 12:47

本文介绍经典CSS面试题，希望可以帮助到大家。...

重绘：当render-tree中的一些元素需要更新属性，而这些属性只影响元素的外观、风格，而不影响布局，比如是background-color,则就称为重绘。

absolute（绝对定位）参考其最近的一个非static的父级元素通过top、right、bottom、left进行定位

<3>绝对定位水平居中

html:语义化标签、新增表单类型、新增表单属性

6、display:none与visibility：hidden的区别？

(1)、RGBA和透明度

static（默认）：按照正常文档流进行排列

css：新增选择器、过渡、转换、动画、媒体查询

(2)、background-image、background-origin、background-size、background-repeat

浮动带来的问题：

<1>不同浏览器标签默认的padding和margin不一样，*{padding:0;margin:0}

(7)、盒阴影box-shadow:5px 5px 5px #ccc;

js:canvas绘图、ES6

微信公众号开发

fixed（固定定位）所固定的参照对象是可视窗口的位置

content-box：w3c标准盒子模型，设置元素的height/width属性指的是content部分的高宽

(4)、文字阴影：text-shadow：5px 5px 5px #ccc;（水平阴影，垂直阴影，模糊距离，阴影颜色）

11、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

<5>、页面渲染初始化

7、对BFC（块级格式化上下文block formatting context）的理解？

<2>chorme浏览器中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入css属性-webkit-text-size-adjust:none;

回流必将引起重绘，重绘不一定会引起回流

IE低版本盒模型：内容的宽度（content+border+padding）+margin；

专题推荐：2020年CSS面试题汇总（最新）

回流：当页面中的布局和几何属性改变时就需要回流，比如是：

border-box：IE传统盒子模型，设置元素的height/width属性指的是border+padding+content部分的高宽

混合APP开发

5、为什么移动端项目要使用box-sizing：border-box?

3、怎样理解HTML5？

1、标准盒模型和低版本IE盒模型（怪异模式）有什么区别？

响应式开发

（1）、在前端领域H5是一个技术集合（技术栈），而不是单纯的一个技术点，所以不能理解是一个html的规范。

<4>、内容的改变（比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变）

9、position的值？

<3>、元素尺寸的改变（边框、尺寸、填充、宽度、高度）

10、常见的兼容性问题

<2>与浮动元素同级的非浮动元素（内联元素）会跟随其后

移动web的开发

<2>居中一个浮动的元素上下左右居中

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

（3）、从职能理解H5的开发

单页面应用开发

<1>父元素的高度无法被撑开

<1>居中p

<1> 父级p定义高度

微信小程序

(5)、font-face：自定义自己的字体

<3> 包含浮动元素的父标签添加样式overflow为hidden和auto

<2> 最后一个浮动元素后加空p标签，并添加样式clear：both

标准盒模型：内容的宽度（content）+border+padding+margin；

<3>若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

box-sizing:border-box;可以避免宽度溢出，造成横向滚动条（移动端项目都是非固定式宽度）

box-sizing属性是用来控制元素的盒子模型的解析模式，默认为content-box

简单的来说BFC是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

清除浮动的方式：

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

经典CSS面试题

最主要的区别在于盒模型的宽度；

(3)、word-wrap(对长的不可分割的单词进行换行)word-wrap:break-word;

（2）、我们可以从html、css、js三个方面进行梳理

<6>、浏览器窗口尺寸的改变-resize事件发生时

<1>、添加或删除可见的DOM元素

4、CSS3有哪些新的特性？

8、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？

由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

relative（相对定位）不脱离文档流，参考自身的top、right、bottom、left进行定位

<2>、元素位置的改变

<4> 父级定义zoom

(8)、媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

H5开发泛指对H5技术栈（HTML的提升、css的提升、JavaScript的提升）的综合使用开发网页应用程序

(6)、圆角（边框半径）：border-radius 属性用于创建圆角

2、利用CSS3属性写出一个三角形

HTML+CSS部分前端基础面试题	七道重要CSS面试题
整理css常见面试题	50道CSS基础面试题，附答案
CSS常见面试题

CSS/HTML

经典CSS面试题

相关文章

热门TAG

最新文章

热门文章